/** 用户管理 */
<template>
  <div>
    <div class="btns">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="addUser">新增用户</el-button>
        </el-form-item>
        <!-- <el-input v-model="formData.input" style="width: 240px" placeholder="请输入" clearable />
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <el-table :data="tableData" height="250" style="width: 100%">
      <el-table-column prop="username" label="用户名" >
      </el-table-column>
      <el-table-column prop="email" label="邮箱" >
      </el-table-column>
      <el-table-column prop="role" label="权限">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row)">
            <el-button type="danger" size="mini" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑的弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input type="email" v-model="dialogForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-select v-model="dialogForm.role" placeholder="请选择用户权限">
            <el-option v-for="item in userRoles" :key="item.id" :label="item.status" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEditUser">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="paginationData.page" :page-sizes="[10, 20, 30, 40]" :page-size="paginationData.page_size"
      layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
import { Message } from 'element-ui'
import {get,Delete,post,put} from '@/utils/request.js'
export default {
  data() {
    return {
      tableData: [],
      formData:{
        input:''
      },
      paginationData:{
        page: 1,
        page_size: 10,
        total: 0
      },
      dialogForm: {
        username: '', //车辆名称
        email:'', //邮箱
        role: '', //权限
      },
      dialogTitle: '新增无人车',
      dialogFormVisible: false, 
      formLabelWidth: '120px',
      userRoles:[
        {id:1,status:'管理员',value:'admin'},
        {id:2,status:'普通用户',value:'user'},
      ]
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogTitle = '编辑用户'
      this.dialogFormVisible = true
      this.dialogForm = row
    },
    handleDelete(row) {
      Delete('http://113.44.61.177:8753/accounts/users/'+row.id+'/').then(res=>{
        // console.log(res);
        this.getUserData()
        Message.success('删除成功')
      }).catch(err=>{
        console.log(err);
      })
    },
    //获取用户列表
    getUserData(){
      axios.get('http://113.44.61.177:8753/accounts/users').then(res=>{
        console.log(res.data.results);
        this.paginationData.total = res.data.count
        this.tableData = res.data.results
      }).catch(err=>{
        console.log(err);
      })
    },
    addUser(){
      console.log('新增用户');
      this.dialogFormVisible = true
      this.dialogTitle = '新增用户'
    },
    addOrEditUser(){
      if(this.dialogTitle == '新增用户'){
        post('http://113.44.61.177:8753/accounts/users/',this.dialogForm).then(res=>{
          Message.success('新增成功')
          this.getUserData()
          this.dialogFormVisible = false
        })
      }else{
        put('http://113.44.61.177:8753/accounts/users/'+this.dialogForm.id+'/',this.dialogForm).then(res=>{
          Message.success('编辑成功')
          this.getUserData()
          this.dialogFormVisible = false
        })
      }
    },
    handleSizeChange(val) {
      this.paginationData.page_size = val
      this.getUserData()
    },
    handleCurrentChange(val) {
      this.paginationData.page = val
      this.getUserData()
    }
  },

  created(){
    this.getUserData()
  }
}
</script>
<style scoped></style>